<!DOCTYPE html>
<html lang="zh_CN" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="utf-8">
    <title>广告位图片 Slide Picture List</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, field-scalable=0">
    <link rel="stylesheet" th:href="@{/statics/layui/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/statics/style/admin.css}" media="all">
    <script th:inline="javascript">
        var slideId = [[${slide == null ? '0':slide.id}]];
    </script>

    <style type="text/css">
        .layui-table-cell {height: auto;}
        .layadmin-cmdlist-fluid {background-color: #F2F2F2 !important;}
        .layadmin-cmdlist-fluid .layui-col-md4 {border: 1px solid #EEE;background-color: #FFFFFF;}
        .layadmin-cmdlist-fluid .cmdlist-text {padding: 5px;}
        .layadmin-cmdlist-fluid .cmdlist-text .layui-btn-container {float: right;}
        .layadmin-cmdlist-fluid .cmdlist-text h3 {font-weight: bold;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
        .layadmin-cmdlist-fluid .cmdlist-text .times {padding:5px 0px 0px 0px;}
    </style>
</head>
<body>

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-form layui-card">
                <div class="layui-card-header" style="padding-top: 3px;">
                    <div class="layui-inline" style="float: left;">
                        <select  name="layui-form-slide-list" lay-filter="layui-form-slide-list" class="form-control input-sm" style="width:250px;">
                            <option th:each="s:${slides}" th:value="${s.id}" th:selected="${slide != null && s.id == slide.id ? 'true':'false'}" th:text="${s.title}">AD</option>
                        </select>
                    </div>
                    <div class="layui-btn-container" style="float: left;" th:if="${slide}!= null">
                        <button th:if="${slide.type} == 'image'" shiro:hasPermission="extend:slide:picture:add" class="layui-btn" style="margin-right:2px" data-type="addImage">
                            添加图片
                        </button>
                        <button th:if="${slide.type} == 'video'" shiro:hasPermission="extend:slide:picture:add" class="layui-btn" style="margin-right:2px" data-type="addVideo">
                            添加视频
                        </button>
                    </div>
                    <div style="float: right">
                        <a class="layui-btn layui-btn-primary" href="/cms/extend/slide/index"> 返回广告位</a>
                    </div>
                </div>
                <div class="layui-card-body">
                    <blockquote class="layui-elem-quote" th:if="${slide != null}">
                        广告位尺寸：<span style="color: #009688"><b th:text="${slide.width} + 'px * ' + ${slide.height} + 'px'"></b></span>；
                        类型：<span style="color: #009688"><b th:text="${slide.type == 'image'?'图片':'视频'}"></b></span>。
                    </blockquote>
                    <div class="layui-fluid layadmin-cmdlist-fluid" style="background-color: #F2F2F2;">
                        <div class="layui-row layui-col-space10">
                            <div class="layui-col-md4 layui-col-sm4" th:each="pic:${pictures}">
                                <div class="cmdlist-container">
                                    <div>
                                        <img th:src="${pic.image}" style="width: 100%;"/>
                                    </div>
                                    <div class="cmdlist-text">
                                        <div class="layui-btn-container">
                                            <div class="layui-btn-group">
                                                <button class="layui-btn layui-btn-sm lay-btn-edit" th:data-id="${pic.id}" data-type="edit"><i class="layui-icon layui-icon-edit"></i></button>
                                                <button class="layui-btn layui-btn-sm lay-btn-del" th:data-id="${pic.id}" data-type="remove"><i class="layui-icon layui-icon-delete"></i></button>
                                            </div>
                                        </div>
                                        <h3 th:text="${pic.title}"></h3>
                                        <div class="times">创建时间: [[${#dates.format(pic.createTime,'yyyy-MM-dd HH:mm:ss')}]]</div>
                                        <div class="times">
                                            <span th:if="${pic.using}"><b style="color:#1E9FFF">使用中...</b></span>
                                            <span th:if="${pic.using == false}"><b style="color:#FF5722">已过期</b></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                    </div>
            </div>
        </div>
    </div>
</div>


<script th:src="@{/statics/layui/layui.js}"></script>
<script th:inline="none">
    layui.config({
        base: '/statics/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index' ,'form'], function () {
        var $ = layui.$
            , admin = layui.admin
            , form = layui.form;

        $('.layui-form .layui-btn-container .layui-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        var active = {
            addImage: function () {
                layer.open({
                    type: 2
                    , title: '添加图片'
                    , content: '/cms/extend/slide/picture/add?slideId=' + slideId
                    , maxmin: true
                    , area: ['600px', '450px']
                    , btn: ['确定', '取消']
                    , yes: function (index, layero) {
                        var iframeWindow = window['layui-layer-iframe' + index]
                            , submitID = 'LAY-slide-add-submit'
                            , submit = layero.find('iframe').contents().find('#' + submitID);

                        //监听提交
                        iframeWindow.layui.form.on('submit(' + submitID + ')', function (data) {
                            var field = data.field; //获取提交的字段

                            //提交 Ajax 成功后，静态更新表格中的数据
                            $.ajax({
                                url: '/api/slide/picture/add',
                                method: 'post',
                                data: data.field,
                                dataType: 'JSON',
                                success: function (res) {
                                    if (res.code == '0') {
                                        location.reload(); //数据刷新
                                        layer.close(index); //关闭弹层
                                    } else {
                                        alert(res.msg);
                                    }
                                },
                                error: function (err) {
                                }
                            });

                        });

                        submit.trigger('click');
                    }
                });
            },
            addVideo: function () {
                layer.open({
                    type: 2
                    , title: '添加视频'
                    , content: '/cms/extend/slide/picture/add?slideId=' + slideId
                    , maxmin: true
                    , area: ['600px', '450px']
                    , btn: ['确定', '取消']
                    , yes: function (index, layero) {
                        var iframeWindow = window['layui-layer-iframe' + index]
                            , submitID = 'LAY-slide-add-submit'
                            , submit = layero.find('iframe').contents().find('#' + submitID);

                        //监听提交
                        iframeWindow.layui.form.on('submit(' + submitID + ')', function (data) {
                            var field = data.field; //获取提交的字段

                            //提交 Ajax 成功后，静态更新表格中的数据
                            $.ajax({
                                url: '/api/slide/picture/add',
                                method: 'post',
                                data: data.field,
                                dataType: 'JSON',
                                success: function (res) {
                                    if (res.code == '0') {
                                        location.reload(); //数据刷新
                                        layer.close(index); //关闭弹层
                                    } else {
                                        alert(res.msg);
                                    }
                                },
                                error: function (err) {
                                }
                            });
                        });
                        submit.trigger('click');
                    }
                });
            }
        };

        $('.lay-btn-edit').on('click',function () {
            var id = $(this).data('id');
            layer.open({
                type: 2
                , title: '修改广告'
                , content: '/cms/extend/slide/picture/edit?id=' + id
                , maxmin: true
                , area: ['600px', '450px']
                , btn: ['确定', '取消']
                , yes: function (index, layero) {
                    var iframeWindow = window['layui-layer-iframe' + index]
                        , submitID = 'LAY-slide-add-submit'
                        , submit = layero.find('iframe').contents().find('#' + submitID);

                    //监听提交
                    iframeWindow.layui.form.on('submit(' + submitID + ')', function (data) {
                        var field = data.field; //获取提交的字段

                        //提交 Ajax 成功后，静态更新表格中的数据
                        $.ajax({
                            url: '/api/slide/picture/edit',
                            method: 'post',
                            data: data.field,
                            dataType: 'JSON',
                            success: function (res) {
                                if (res.code == '0') {
                                    location.reload(); //数据刷新
                                    layer.close(index); //关闭弹层
                                } else {
                                    alert(res.msg);
                                }
                            },
                            error: function (err) {
                            }
                        });
                    });
                    submit.trigger('click');
                }
            });
        });

        $('.lay-btn-del').on('click',function () {
            var id = $(this).data('id');
            layer.confirm('真的删除么', function (index) {
                $.ajax({
                    url: '/api/slide/picture/remove?id=' + id,
                    method: 'DELETE',
                    contentType: "application/json;charset=UTF-8",
                    dataType: 'JSON',
                    success: function (res) {
                        if (res.code == '0') {
                            layer.msg('记录已删除!', {icon: 1, time: 1000}, function () {
                                location.reload();
                            });
                        } else {
                            layer.msg(res.msg);
                        }
                    },
                    error: function (err) {
                    }
                });
            });
        });

        form.on('select(layui-form-slide-list)', function(data){
            var slideId = data.value;
            self.location.href = '/cms/extend/slide/picture/index?slideId=' + slideId;
        });

    });
</script>
</body>
</html>